<template>
	<view class="page">

		<view class="top_image u-padding-left-8 u-padding-right-8 u-padding-top-8"
		:style="{
			transform: `translateY(${-top_image}rpx)`
		}"
		>
			<u-image width="100%" :height="600" :src="info.picture" :lazy-load="true" :fade="true" duration="300"
				:border-radius='30' mode='aspectFill'>
				<u-loading slot="loading"></u-loading>
			</u-image>
		</view>

		<view
			class="article_box article-transform-margin u-padding-left-30 u-padding-right-30 u-margin-left-8 u-margin-right-8">

			<view class="public-title-bar u-margin-bottom-20 u-padding-top-20">
				游玩攻略
			</view>
			<view class="">
				<!-- <u-read-more ref="uReadMore" :toggle="true" color='#FA3534'>  @load="$refs.uReadMore.init()"-->
					<u-parse  :html="info.content" :seletable="true" :lazy-load="true"
						show-with-animation :tag-style="{
								img : 'display: block;border-radius: 10rpx;'
							}">
					</u-parse>
				<!-- </u-read-more> -->
			</view>

			<!-- 宫格预览图 -->
			<view class="">
				<view class="public-title-bar u-margin-bottom-0" v-if="info.img_arr.length !== 0">
					更多图片
				</view>
				<u-grid :col="3" :border='false' class="u-padding-30">
					<u-grid-item @click="view_img(index)" v-for="(item , index) in info.img_arr" :key='index'
						:custom-style='{padding : "10rpx 10rpx"}'>
						<u-image :src="item" width="220rpx" height="200rpx" duration='300' border-radius='10'>
							<u-loading slot="loading"></u-loading>
						</u-image>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view v-if="info.house_id > 0"
			@click="goto_details"
			class="article_box u-margin-top-8 u-padding-top-30 u-padding-bottom-30 u-padding-left-30 u-padding-right-20 u-margin-left-8 u-margin-right-8 u-flex ">
			<u-image width="250" height="250" :src="info.house_info.img" :lazy-load="true" :fade="true" duration="300"
				:border-radius='20' mode='aspectFill'>
				<u-loading slot="loading"></u-loading>
			</u-image>
			
			<view class="house_info u-flex-col u-row-between u-padding-left-20 u-padding-top-15  u-padding-bottom-15" >
				<text class="house_name">{{info.house_info.house_name}}</text>
				<view class="">
					<view class="u-flex u-flex-wrap">
						<text class="keywords_arr u-margin-right-10 u-margin-bottom-10 u-padding-left-10 u-padding-right-10" v-for="(item , index) in info.house_info.keywords_arr" :key='index'>
							{{item}}
						</text>
					</view>
				</view>
				<view class="u-flex u-row-between">
					<text class=" u-flex u-col-center ">
						<text class="rmb">¥</text>
						<text class="price u-margin-left-8">{{info.house_info.price}}</text>
						<text class="qi u-margin-left-8">起</text>
					</text>
					<view class="buy_button u-margin-right-20">
						立即预订
					</view>
				</view>
			</view>
		</view>
		<!-- 点击数 、 收藏数 、 分享按钮 -->
		<view class="buttons u-flex u-padding-left-30 u-padding-right-30">
			<view class="buttons-box u-flex-1 u-flex u-row-around">
				<LoginButton :item='item' @click='collectData'>
					<view class="u-flex u-flex-col">
						<u-icon :name="info.user_collect == 1 ? 'heart-fill' : 'heart'" size="50"
							:color="info.user_collect == 1 ? '#FA3534' : '#333'"></u-icon>
						<text class="buttons-box-text">收藏</text>
						<!-- ：{{info.likes}} -->
					</view>

				</LoginButton>
				<!-- 点击数 -->
				<LoginButton>
					<view class="u-flex u-flex-col">
						<u-icon name="fingerprint" size="50" color="#333">
						</u-icon>
						<text class="buttons-box-text">点击量：{{info.click_num}}</text>
					</view>

				</LoginButton>
				<!-- 分享 -->
				<LoginButton :item='item' open_type='share'>
					<view class="u-flex u-flex-col">
						<u-icon name="zhuanfa" size="50" color="#333"></u-icon>
						<text class="buttons-box-text">分享</text>
					</view>
				</LoginButton>
			</view>
		</view>

		<!-- <view class="u-padding-left-30 u-padding-right-30 u-margin-top-15 u-margin-bottom-15">
			<u-tag class="u-margin-right-15" :text="item" type='info' shape="circle" :key='index'
				v-for="(item , index) in info.house_info.keywords_arr" />
		</view> -->
		<!-- <u-swiper :height='480' bottomBar_height='150' :effect3d-previous-margin='30' :bottomBar='true'
			:border-radius='10' bg-color='#ffffff' :list="info.house_info.room_list" :autoplay='false' name='img'
			:effect3d="true" :circular="false" mode='none' @click="goto_details">
		</u-swiper> -->


		<view class="u-padding-top-60">
			<view class="u-padding-top-60">
				<view class="u-padding-top-80">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LoginButton from '@/components/login-button/index.vue';
	import Share from '@/uview-ui/libs/mixin/mpShare.js';
	export default {
		mixins: [Share], // 使用mixin
		data() {
			return {
				top_image : 0 ,
				id: '',
				info: {}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.init()
		},
		onPageScroll(e) {
			// if(e.scrollTop < 601) {
				// this.top_image = e.scrollTop * 1 ;
			// } ;
			// console.log(e) ;
			// if(this.top_image >= 600) {
			// 	this.top_image = this.top_image - e.scrollTop ;
			// }else{
			// 	this.top_image = this.top_image + e.scrollTop ;
			// }
		},
		methods: {
			// 进入详情
			goto_details(index) {
				// console.log(this.info.house_info.room_list[index].id) ;
				this.$u.route({
					url: 'pages/roomDetails/index',
					params: {
						id: this.info.house_info.id,
					}
				})
			},

			view_img(index) {
				uni.previewImage({
					current: index,
					urls: this.info.img_arr,
				});
			},
			// 提交收藏
			collectData() {
				this.$u.api.collectData({
					collect_id: this.id,
					type: 1, // 1 == 文章
				}).then(res => {
					if (res.code == 1) {
						this.info.user_collect = 1;
					}
				})
			},

			init() {
				this.$u.api.articleInfo({
					id: this.id,
				}).then(res => {
					this.info = res.info;
					if (res.info.strategy_title) {
						uni.setNavigationBarTitle({
							title: res.info.strategy_title
						})
					};
					if (this.info.house_info.room_list) {
						this.info.house_info.room_list.forEach(item => {
							if (item.img.length == 0) {
								item.img = '/static/icon/no_img.png'
							}
						})
					}
					this.$u.mpShare = {
						title: this.info.strategy_title,
						imageUrl: this.info.picture,
					};
				})
			}
		},
		components: {
			LoginButton
		}
	}
</script>

<style lang="scss" scoped>
	.article-transform-margin{
		// margin-top: 616rpx;
	}
	.top_image{
		// position: fixed;
		// top: 0rpx;
		// left: 0rpx;
		// width: 100%;
		// background-color: #000000;
		// z-index: -1;
		// will-change: transform;
		// transition: transform .1s;
		// height: 100vh;
	}
	.rmb{
		font-size: 24rpx; 
	}
	.price{
		font-size: 32rpx;
	}
	.qi{
		color: #909399;
		font-size: 20rpx;
	}
	.rmb , .price {
		font-weight: 700;
		color: #000000;
	}
	.buy_button{
		font-weight: 700;
		height: 60rpx;
		line-height: 60rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 30rpx;
		border:solid #000000 2rpx ;
	}
	.keywords_arr{
		border: solid 2rpx #000000;
		border-radius: 8rpx;
		font-size: 22rpx;
	}
	.house_name{
		font-weight: 700;
		color: #000000;
		font-size: 30rpx;
	}
	.house_info{
		height: 250rpx;
	}
	.article_box {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		background-color: #FFFFFF;
	}

	.page {
		background-color: #000;
		min-height: calc(100vh - 616rpx);
	}

	.buttons-box-text {
		font-size: 26rpx;
		color: #000000;
		font-weight: 700;
		margin-top: 8rpx;
	}

	.buttons-box {
		background-color: rgba(255, 255, 255, .9);
		height: 120rpx;
		box-shadow: 0rpx 0rpx 14rpx 0rpx #999;
		border-radius: 20rpx;
	}

	.buttons {
		position: fixed;
		left: 0rpx;
		bottom: 50rpx;
		width: 750rpx;
	}

	.public-title-bar {
		// color: #000000;
		color: #333;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		font-weight: 700;
		font-size: 40rpx;
	}
</style>
